<template>
    <div class="shopcar-container">
       
       <div class="mui-card" v-for="item in goodslist" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner goods-item">
                    <!-- 开关 -->
                   <mt-switch v-model="selectedObj[item.id]" @change="changeSelected(item.id,selectedObj[item.id])"></mt-switch>
                    <img :src="item.thumb_path">
                   <div class="info">
                       <h1>{{item.title}}</h1>
                       <div class="goodsinfo">
                            <span class="price">￥{{item.sell_price}}</span>
                            <!-- 把初始化数量传给nobox -->
                            <nobox :initcount="countObj[item.id]" :id="item.id"></nobox>
                            <a href="#" @click.prevent="del(item.id)">删除</a>
                       </div>
                   </div>
                </div>
            </div>
        </div>
        <!-- 结算区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
                            <h3>总计（不含运费）</h3>
                            <p>
                                已选购<span class="danger">{{selectedcount}}</span>件,
                                总价<span class="danger">￥{{amount}}</span>
                            </p>
                        </div>
                        <mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>
    </div>
</template>

<script>
import nobox from '../sub-compoents/shopcar_nobox.vue'
import {mapGetters,mapMutations} from 'vuex'



export default {
    data() {
        return {
            goodslist:[]
        }
    },
    components:{
        nobox
    },
    methods:{
        ...mapMutations(["delFromCart","changSelectState"]),
        async getGoodsList(){
            //如果idstr返回的数据中没有id则 不发起get请求
            if(this.idstr.length<=0) return
            const {data} = await this.$http.get("/api/goods/getshopcarlist/"+this.idstr)
            if(data.status===0) this.goodslist=data.message
        },
        del(id){
            this.goodslist.some((item,i)=>{
                if(item.id==id){
                    //从页面中删除
                    this.goodslist.splice(i,1)
                    //从缓存中删除
                    this.delFromCart(id)
                    return true
                }
            })
        },
        changeSelected(id,selected){
            //更改开关状态
            // console.log(id+"+++++++"+selected);
            this.changSelectState({id,selected})
            
        },
    },
    computed:{
        ...mapGetters(["idstr","countObj","selectedObj","selectedcount","amount"])
    },
    created(){
        this.getGoodsList()
    }
}
</script>

<style lang="scss" scoped>
    .shopcar-container{
        background-color: #eee;
        overflow: hidden;
        .goods-item{
            display: flex;
            img{
                width: 60px;
                height: 60px;
            }
            h1{
                font-size: 14px;
            }
            .info{
                display: flex;
                flex-direction: column;
                 justify-content: space-between;
                .goodsinfo{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;//纵向居中
                    .price{
                        font-size: 14px;
                        color: red;
                        font-weight: bold;
                    }
                }
            }
        }
        .danger{
            font-size: 14px;
            color: red;
            font-weight: bold;
        }
        .jiesuan{
            display: flex;
            justify-content: space-between;

        }
    }
    
</style>